<!--折线-柱状图组件-->
<template>
  <div id="linehistogram-box" style="height: 530px; width: 1050px">
    <div id="linehistogram"></div>
  </div>
</template>

<script>
  export default {
    name: "LineHistogram",
    data(){
      return{
        /*初始化测试用数据*/
        options:{},
        testDataNormal:[22, 75, 164, 225, 213, 176, 149, 101, 32, 45, 15, 72],
        testDataFault:[22, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2],
        testDataOffline:[6, 20, 31, 45, 63, 102, 20, 23, 23, 16, 12, 6],
      }
    },
    mounted() {
      this.initLinehistogram();
    },
    methods:{
      initLinehistogram(){
          this.options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          legend: {
            data: ['正常车辆', '故障车辆', '离线车辆'],
            orient:'horizontal',
            x:'left',
            y:'top',
          },
          xAxis: [
            {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量',
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: '{value} 辆'
              }
            },
          ],
          series: [
            {
              name: '正常车辆',
              type: 'bar',
              color: '#b7eb8f',
              data: this.testDataNormal
            },
            {
              name: '故障车辆',
              type: 'line',
              color: '#d0021b',
              data: this.testDataFault
            },
            {
              name: '离线车辆',
              type: 'line',
              color: '#00474f',
              data: this.testDataOffline
            }
          ]
        };
        let mychart = this.$echarts.init(document.getElementById('linehistogram'));
        mychart.setOption(this.options)
      }
    }
  }
</script>

<style scoped>
  #linehistogram{
    height: 100%;
    width: 100%;
  }
</style>
